<script setup>
  import { useRouter } from 'vue-router'
  const routes = useRouter().options.routes

</script>

<template>
  <div class="app">
    <div class="app_menu">
      <el-menu router mode="vertical" style="width:300px;padding: 0;">
        <template v-for="item in routes" :index="item.path">
          <el-menu-item v-if="!(item.meta&&item.meta.hideInMenu)" :index="item.path">{{ item.meta.name }}</el-menu-item>
        </template>
      </el-menu>

    </div>
    <div class="app_cont">
      <div style="height:100%;overflow: auto;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
  }

  .page {
    height: 100%;
    width: 100%;
    overflow: auto;
  }
</style>
<style scoped lang="scss">
  .app_menu {
    width: 300px;
    padding: 20px 0;
    box-sizing: border-box;
    height: 100vh;
    box-sizing: border-box;

    * {
      margin: 10px;
    }
  }

  .app_cont {
    padding: 10px 20px 0 20px;
    box-sizing: border-box;
    flex-grow: 1;
    height: 100%;
    overflow: auto;
  }

  .app {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }
</style>